<template>
    <div>
        <!--上半部分-->
        <div class="lay-select" @click="selectClick">
            <label class="lay-title">{{ text }}</label>
            <div class="lay-triangle">
                <i class="down"></i>
            </div>
        </div>
        <!--下半部分-->
        <div class="lay-detailed" v-show="seldetailed">
            <div
                :class="
                    id == item.id
                        ? 'detailed-content active'
                        : 'detailed-content'
                "
                v-for="(item, index) in listData"
                :key="index"
                @click="getitem(item)"
            >
                <label class="detailed-number">{{ item.name }}</label>
                <div class="lay-triangle"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: ""
        },
        listData: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {
            seldetailed: false, //先将下拉框隐藏
            id: ""
        };
    },
    methods: {
        getitem(item) {
            this.id = item.id;
            this.$emit("parents", { name: item.name, id: item.id });
            this.seldetailed = !this.seldetailed; //点击显示或隐藏下拉框
        },
        selectClick() {
            this.seldetailed = !this.seldetailed; //点击显示或隐藏下拉框
        }
    },
    mounted() {
        this.id = this.listData[0].id;
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
.lay-select {
    width: pxToRem(214);
    height: 34px;
    display: inline-block;
    border-radius: 1px;
    margin: 0px 0px -2px 8px;
    cursor: pointer;
    background-image: url("../../../assets/images/ags/env/select_tab.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .lay-title {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #94d8ff;
        flex: 1;
        text-align: center;
        cursor: pointer;
    }
    .lay-triangle {
        // border: 8px solid transparent;
        // border-top: 8px #94D8FF solid;
        // width: 0px;
        // height: 0px;
        display: inline-block;
        float: right;
        margin: 0 18px 0 0px;
        i {
            border: solid #94d8ff;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
        }
    }
}
.lay-detailed {
    position: absolute;
    z-index: 9999999;
    top:34px;
    left:pxToRem(2);
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #9CA7AF;
    background: #082034;
    padding: 5px;
    box-sizing: border-box;
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    .detailed-number {
        cursor: pointer;
        font-size: 14px;
        text-align: center;
    }
    .delete-img {
        width: 84%;
        height: 6px;
        margin: 0 4px 0 10px;
    }
    .detailed-content {
        cursor: pointer;
        width:pxToRem(214);
        padding: 8px 15px;
        border-bottom: 1px solid #112F43;
        margin-bottom: 2px;
    }
    .active {
        color: #D8F0FE;
        background: #1F455D !important;
    }
}
.lay-detailed::-webkit-scrollbar {
    width: 0 !important
}


</style>
